<template>
  <div class="chatList">
    <div class="chat-view" ref="containerRef" @scroll="handleScroll">
      <div
        class="chat-item"
        v-for="(item, key) in onlineCustomerList"
        :key="key"
        :class="key == changeUser ? 'active' : ''"
        @click="changeItem(item, key)"
        @contextmenu="onContextMenu($event, key)"
      >
        <div class="chat-img">
          <el-image :src="item.avatar" />
          <div class="dot" v-if="item.status"></div>
          <div class="dot-not" v-else></div>
        </div>
        <div class="chat-name">
          <div class="content-title">
            <span class="pc-name">{{ item.name }}</span>
          </div>
          <div class="content-txt">
            {{ setContent(item) }}
          </div>
        </div>
        <div class="chat-time">
          <div>{{ setTime(item) }}</div>
          <div>
            <span v-if="setMsg(item)"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search, Filter, ArrowDown } from '@element-plus/icons-vue'
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import ContextMenu from '@imengyu/vue3-context-menu'

const changeUser = ref('')
const containerRef = ref(null)
const props = defineProps({
  onlineCustomerList: Object,
  messageList: Object
})
const emit = defineEmits(['selectChat', 'loadScroll', 'clearStoreTarget'])
const onContextMenu = (e, key) => {
  e.preventDefault()
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    items: [
      {
        label: '清除当前本地记录',
        onClick: () => clear(key, false)
      },
      {
        label: '清除全部记录',
        onClick: () => clear(key, true)
      }
    ]
  })
}
//清空本地会话记录
const clear = (key, value) => {
  emit('clearStoreTarget', key, value)
}

// 无限滚动
const handleScroll = () => {
  const container = containerRef.value
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    emit('loadScroll')
  }
}
// 设置最新的内容
const setContent = (value) => {
  const arr = props.messageList[value.sessionId]
  if (arr) {
    if (arr.length) {
      const str = arr[arr.length - 1].text ? arr[arr.length - 1].text : arr[arr.length - 1].content
      const pattern = /<img[^>]*>/
      if (pattern.test(str)) {
        return '收到一条图片消息'
      } else {
        return str
      }
    } else {
      return '  '
    }
  } else {
    return ' '
  }
}
// 设置最新的时间
const setTime = (value) => {
  const arr = props.messageList[value.sessionId]
  if (arr) {
    if (arr.length) {
      return arr[arr.length - 1].time
    } else {
      return ' '
    }
  } else {
    return ' '
  }
}
// 未读消息
const setMsg = (value) => {
  const arr = props.messageList[value.sessionId]
  if (arr) {
    if (arr.length) {
      return arr[arr.length - 1].reading
    } else {
      return false
    }
  } else {
    return false
  }
}

const changeItem = (item, key) => {
  changeUser.value = key
  emit('selectChat', item)
}
</script>

<style lang="scss" scoped>
.chatList {
  flex: 0.7;
  height: 100%;
  background-color: #fff;
  .chat-view {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    &::-webkit-scrollbar {
      width: 2px;
    }
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    &::-webkit-scrollbar-thumb {
      background: #d8d8d8;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #d8d8d8;
    }
    &::-webkit-scrollbar-thumb:horizontal:start {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:horizontal:end {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    .active {
      background: #eff0f1;
      border-left: 3px solid #1890ff !important;
    }
    .chat-item {
      padding: 12px 10px;
      border-left: 3px solid transparent;
      display: flex;
      cursor: pointer;
      .chat-img {
        position: relative;
        .dot {
          width: 8px;
          height: 8px;
          background: #48d452;
          border-radius: 50%;
          position: absolute;
          right: 5px;
          bottom: 3px;
        }
        .dot-not {
          width: 8px;
          height: 8px;
          background: #999;
          border-radius: 50%;
          position: absolute;
          right: 5px;
          bottom: 3px;
        }
        .el-image {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .chat-name {
        margin-left: 12px;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content-title {
          display: flex;
          .pc-name {
            font-size: 16px;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 5px;
          }
        }
        .content-txt {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: #8e959e;
        }
      }
      .chat-time {
        color: #8e959e;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        div {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: red;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>
